<template>
  <div class="article-content-management">
    <el-card>
      <el-tabs
        v-model="activeName"
        class="demo-tabs"
        @tab-click="handleTabClick"
      >
        <el-tab-pane
          :label="tab.label"
          :name="tab.status"
          v-for="(tab, index) in tabsData"
          :key="index"
        >
          <el-table :data="table" stripe v-if="table.length > 0">
            <el-table-column type="selection"></el-table-column>
            <el-table-column
              prop="title"
              label="标题"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="nickName"
              label="作者"
              align="center"
            ></el-table-column>
            <el-table-column prop="tagNames" label="标签" align="center">
              <template #default="{ row }">
                <el-tag
                  style="margin-right: 5px"
                  v-for="(tag, index) in row.tagNames"
                  :key="index"
                  size="small"
                >
                  {{ tag }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="publishedAt"
              label="发布时间"
              align="center"
              v-if="tab.status == 3"
              :formatter="dateFormat"
            ></el-table-column>
            <el-table-column
              prop="createdTime"
              label="创建时间"
              align="center"
              :formatter="dateFormat"
            >
            </el-table-column>
            <el-table-column prop="status" label="状态" align="center">
              <template #default="{ row }">
                <el-tag v-if="row.status == 0" type="error" plain>私密</el-tag>
                <el-tag v-if="row.status == 1" type="info" plain>草稿</el-tag>
                <el-tag v-if="row.status == 2" type="warning" plain
                  >审核中</el-tag
                >
                <el-tag v-if="row.status == 3" type="success" plain
                  >已发布</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="300">
              <template #default="{ row }">
                <el-button
                  type="success"
                  icon="Edit"
                  @click="edit(row.id)"
                  size="small"
                  >编辑</el-button
                >
                <el-button
                  type="danger"
                  icon="delete"
                  @click="del(row.id)"
                  size="small"
                  >删除</el-button
                >
                <el-button type="primary" size="small" icon="more"
                  >更多</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <div class="pagination" style="display: flex; justify-content: center">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            v-model:current-page="entity.page"
            v-model:page-size="entity.pageSize"
            @current-change="handleCurrentChange"
            style="margin-top: 10px"
            v-if="table.length > 0"
          />
        </div>
      </el-tabs>
      <el-empty description="description" v-if="table.length <= 0" />
    </el-card>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { reqQueryPage, reqDelete } from "@/api/article";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import useUserStore from "@/store/modules/user";

let userStore = useUserStore();

const $router = useRouter();

const activeName = ref(null);

// 用于获取表格数据的参数
const entity = ref({
  page: 1,
  pageSize: 10,
  title: "",
  articleAbstract: "",
  status: null,
  isDeleted: 0,
  userName: userStore.userName,
});

const total = ref(0);

const tabsData = ref([
  { label: "全部", status: null },
  { label: "私密", status: 0 },
  { label: "草稿", status: 1 },
  { label: "审核中", status: 2 },
  { label: "已发布", status: 3 },
]);

// 表格数据
const table = ref([]);

// 编辑数据
const edit = (id) => {
  $router.push({
    query: {
      articleId: id,
    },
    path: "/upload-article",
  });
};

// 获取文章数据
const getArticleData = () => {
  reqQueryPage(entity.value).then((res) => {
    if (res.code == 200) {
      total.value = res.data.total;
      table.value = res.data.result;
    }
  });
};

getArticleData();

// 日期格式化
const dateFormat = (row, column, cellValue, index) => {
  const daterc = row[column.property];
  if (daterc != null) {
    var date = new Date(daterc);
    var year = date.getFullYear();
    /* 在日期格式中，月份是从0开始，11结束，因此要加0
     * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
     * */
    var month =
      date.getMonth() + 1 < 10
        ? "0" + (date.getMonth() + 1)
        : date.getMonth() + 1;
    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    var minutes =
      date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    var seconds =
      date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    // 拼接
    return (
      year +
      "-" +
      month +
      "-" +
      day +
      " " +
      hours +
      ":" +
      minutes +
      ":" +
      seconds
    );
  }
};

// 处理分页
const handleCurrentChange = (val) => {
  entity.page = val;
  getArticleData();
};

// 处理tab页切换
const handleTabClick = (args) => {
  console.log(args.props.name);
  // args.props.name ---- 文章状态
  entity.value.status = args.props.name;
  getArticleData();
};

// 删除文章
const del = (id) => {
  const entity = {
    id,
  };
  reqDelete(entity).then((res) => {
    if (res.code == 200) {
      ElMessage.success("删除成功");
      getArticleData();
    } else {
      ElMessage.error("删除失败");
    }
  });
};
</script>

<style scoped lang="scss">
.article-content-management {
  width: 100%;
  // height: calc(100vh - 95px);
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>